<template>
  <div  v-title="'班次安排 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="content-box MkArrangementDetail"    v-loading="loadingTab"
         element-loading-text="拼命加载中">
      <div class="headDiv">
        <div class="big">
          <span>{{detailObj.startSiteName}}</span>
          <ticket-arrow></ticket-arrow>
          <span>{{detailObj.endSiteName}}</span>
        </div>
        <div class="small">途经：{{detailObj.midwaySiteName}}</div>
        <div class="small">{{detailObj.ruleDate}} 发车</div>
        <mk-permission :perms="['Ticket:LineManagement:Schedule:create']">
          <el-button type="primary" size="" class='btn-create' @click="dialogVisible_add = true">添加临时安排</el-button>
        </mk-permission>
      </div>
      <div class="selectTimeDiv">
        <img src="../../../assets/img/left.png" alt="" class="leftImg" @click="preWeek">
        <span>{{firstSaturdayTime}}</span>
        <span>~</span>
        <span>{{showEndTime}}</span>
        <img src="../../../assets/img/right.png" alt=""  class="rightImg" @click="nextWeek" v-if="countClick < 3">
      </div>
      <table v-if="detailObj.records">
        <thead>
          <tr>
            <td class="firstColumn"> </td>
            <td><div class="day">周日</div><div class="date">{{detailObj.records[0][0].date}}</div></td>
            <td><div  class="day">周一</div><div class="date">{{detailObj.records[0][1].date}}</div></td>
            <td><div  class="day">周二</div><div class="date">{{detailObj.records[0][2].date}}</div></td>
            <td><div  class="day">周三</div><div class="date">{{detailObj.records[0][3].date}}</div></td>
            <td><div  class="day">周四</div><div class="date">{{detailObj.records[0][4].date}}</div></td>
            <td><div  class="day">周五</div><div class="date">{{detailObj.records[0][5].date}}</div></td>
            <td><div  class="day">周六</div><div class="date">{{detailObj.records[0][6].date}}</div></td>
          </tr>
        </thead>
        <tbody>
        <template v-for="(item,index) in detailObj.records">
          <tr>
            <td class="firstColumn"><div>{{index * 2 + 6}}:00</div></td>
            <template v-for="td in item">
              <td>
                <template v-for="data in td.data">
                  <div class="info" @click = 'showDetail(data.id,data.time)'>{{data.time}} 发车</div>
                </template>
              </td>
            </template>
          </tr>
        </template>
        </tbody>
      </table>
    </div>
    </el-scrollbar>
      <!--安排详情-->
    <mk-detail :showDialog='dialogVisible_detail' :currentRecordId = 'currentRecordId' :currentSendTime = 'currentSendTime'  v-on:closeDialog='closeDialog_detail'></mk-detail>

    <!--添加-->
    <mk-add :showDialog='dialogVisible_add' :currentId = 'currentId' :currentStart = 'detailObj.startSiteName' :currentEnd = 'detailObj.endSiteName' :currentMidway ='detailObj.midwaySiteName' v-on:closeDialog='closeDialog_add'></mk-add>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
import ticketArrow from '../../../components/ticketArrow.vue'
  import MkDetail from './MkDetail.vue'
  import routeService from '../../../services/route'
  import MkPermission from "../../../components/MkPermission";
  import MkAdd from './MkAdd.vue'
import { mapState } from 'vuex'
export default {
  name: 'MkArrangementDetail',
  components: {
    MkBreadcrumb,ticketArrow,MkDetail,MkAdd,MkPermission
  },
  props: ['showDialog'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    fixedHeightSmall: state => state.global.fixedHeightSmall,
  }),
  mounted: function() {
    this.currentId = this.$route.query.id;
    let now = new Date();
    let nowTime = now.getTime();
    let day = now.getDay();//周天(0)-周六（6）
    let oneDayLong = 24 * 60 * 60 * 1000;

    this.firstSaturdayTime = new Date(nowTime - day * oneDayLong).pattern('yyyy-MM-dd'); //周天
    this.secondSaturdayTime = new Date(nowTime + (7 - day) * oneDayLong).pattern('yyyy-MM-dd'); //周天

    this.showEndTime =  new Date(nowTime + (6 - day) * oneDayLong).pattern('yyyy-MM-dd'); //周六

    this.loadDetail();
  },
  methods: {
    preWeek() {
      let oneDayLong = 24 * 60 * 60 * 1000;
      this.firstSaturdayTime = new Date(new Date(this.firstSaturdayTime).getTime() - 7 * oneDayLong).pattern('yyyy-MM-dd');
      this.secondSaturdayTime = new Date(new Date(this.secondSaturdayTime).getTime() - 7 * oneDayLong).pattern('yyyy-MM-dd');

      this.showEndTime = new Date(new Date(this.showEndTime).getTime() - 7 * oneDayLong).pattern('yyyy-MM-dd');
      this.countClick -= 1;
      this.loadDetail();
    },
    nextWeek() {
      if(this.countClick == 3) {
          return;
      }
      console.log(this.countClick)
      let oneDayLong = 24 * 60 * 60 * 1000;
      this.firstSaturdayTime = new Date(new Date(this.firstSaturdayTime).getTime() + 7 * oneDayLong).pattern('yyyy-MM-dd');
      this.secondSaturdayTime = new Date(new Date(this.secondSaturdayTime).getTime() + 7 * oneDayLong).pattern('yyyy-MM-dd');

      this.showEndTime = new Date(new Date(this.showEndTime).getTime() + 7 * oneDayLong).pattern('yyyy-MM-dd');

      this.countClick += 1;

      this.loadDetail();
    },
    loadDetail() {
      let param = {
        scheduleId: this.currentId,
        startDate: this.firstSaturdayTime,
        endDate: this.secondSaturdayTime,
      }
      this.loadingTab = true;
      routeService.loadArrangementRecord(param, data => {
        this.detailObj = data.data;
        this.loadingTab = false;
      })
    },
    showDetail(currentRecordId,time) {
        this.currentRecordId = currentRecordId;
        this.currentSendTime = time;
        this.dialogVisible_detail = true;
    },
    closeDialog_detail(type) {
      if(type == 'yes') {
          this.loadDetail();
      }
      this.dialogVisible_detail = false;
    },
    closeDialog_add(type) {
      if(type == 'yes') {
        this.loadDetail();
      }
      this.dialogVisible_add = false;
    }
  },
  watch: {

  },
  data () {
    return {
      countClick:0,
      currentSendTime: '',
      currentRecordId: '',
      loadingTab: false,
      detailObj: {},
      currentId: '',
      showEndTime: '',
      secondSaturdayTime: '',
      firstSaturdayTime: '',
      dialogVisible_add: false,
      dialogVisible_detail: false,
      breadcrumbData: {
        list: {
          first: {name:'线路管理',path: null, isClickAble: false},
          second: {name: '班次安排',path: '/', isClickAble: true},
          third:{name:'安排详情',path:null,isClickAble: false,}
        },
        menuIconStyle : 'routeIconStyle'
      },
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
 .MkArrangementDetail {

   .headDiv{
     background:#fff;
     padding:30px;
     position:relative;
     .big{
       span{
         font-size:24px;
         line-height: 24px;
         color:@fontColorOne;
       }
       margin-bottom:10px;
     }
     .small{
       font-size:14px;
       line-height: 30px;
       color:@fontColorTwo;
     }
     .btn-create{
       position:absolute;
       top:30px;
       right:30px;
     }
     border-bottom:1px solid @borderColor;
   }
   .selectTimeDiv{
     background:#fff;
     padding:30px;
     font-size:18px;
     img{
       position:relative;
       top:3px;
       cursor: pointer;
       &:hover{
         .my-opacity();
       }
     }
     .leftImg{
       margin-right:10px;
     }
     .rightImg{
       margin-left:10px;
     }
   }
   table{
     width:100%;
     background:#fff;
/*     border:1px solid @borderColor;*/
     border-collapse:collapse;
     text-align: center;
     td{
       border: 1px solid @borderColor;
     }
     thead{
        td{
          height:70px;
          .day{
            font-size:14px;
            color:@fontColorThree;
          }
          .date{
            margin-top:5px;
            font-size:18px;
            color:@fontColorOne;
          }
        }
     }
     tbody{
       vertical-align: top;
       .firstColumn{
         /*div{*/
         padding-bottom:0;
         vertical-align: middle;
         min-height:60px;
         height:60px;
         font-size:16px;
         width:120px;
           color:@fontColorThree;
         /*}*/
       }
       td{
         padding-bottom:3px;
         .info{
           cursor: pointer;
           margin:3px 3px 0;
           background:@primaryColor;
           background-color:rgba(255,162,10,0.4);
           color:@fontColorOne;
           .my-border-radius(2px);
           font-size:14px;
           line-height: 26px;
         }
       }

     }
   }
  }
</style>
